<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String corpId = (String)request.getAttribute("corpId");
    String corpSecret = (String)request.getAttribute("corpSecret");
%>
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>我的课程</title>
    <link href="../../lib/dropload/dropload.css" rel="stylesheet"/>
    <link rel="stylesheet" href="/lib/layui/layui/css/layui.css">
    <script type="text/javascript" src="../../js/jquery/jquery.min.js"></script>
    <script type="text/javascript" src="../../js/base/base.js"></script>
    <script type="text/javascript" src="../../js/ewx/waterMark.js?20190819.2"></script>
    <link href="../../css/H5/default.css" rel="stylesheet"/>
    <script type="text/javascript" src="../../lib/dropload/dropload.js"></script>
    <script src="/lib/layui/layui/layui.js"></script>
</head>
<style>
    video{
        width: 100%;
        height: 200px;
    }
    .item {
        margin-top: 20px;
    }
    .item h2{
        height: 40px;
        line-height: 40px;
        background:#f2f2f2;
        padding-left: 10px;
        box-sizing: border-box;
    }
    .conent{
        font-size: 14px;
        text-indent: 2em;
        margin: 10px;
        line-height: 24px;
    }
    .Introduction{
        font-size: 14px;
        text-indent: 2em;
        margin: 10px;
        line-height: 24px;
    }
    .detail{
        margin-left: 10px;
        height: 25px;
        line-height: 25px;
    }
    #pingCon{
        width: 95%;
        margin-left: 10px;
    }
    #graded{
        width: 95%;
        margin-left: 10px;
    }
    .popups p{
        line-height: 30px;
        margin: auto 10px;
    }
    .popups p span{
        font-size: 20px;
    }
    .popups .wid{
        width: 99px;
        text-align: right;
        display: inline-block;
        margin-right: 10px;
        margin-top: 10px;
    }
</style>
<body>
<div>
    <div class="Play">

    </div>

    <div class="item">
        <h2>课程介绍</h2>
        <div class="Introduction"></div>
        <h2>内容目录</h2>
        <div class="" id="two">
            <div class="layui-card" id="courseCon">
                <div id="tables" class="layui-collapse">
                    <div class="layui-colla-item">
                        <p class="layui-colla-content layui-show">点击查看详情</p>
                        <h2 class="layui-colla-title" style="margin-top:0px"><span style="margin:0px 20px 0px 30px;">1</span><span style="margin:0px 12px ;">面授课程</span><span id="OfflineCourseName"></span></h2>
                        <div class="layui-colla-content layui-show">
                            <div style="margin: 0 auto;">
                                <table id="contentDirectory" lay-filter="contentDirectory" ></table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <h2>学员评价</h2>
        <div class="studentEvaluation">
            <div style="text-align:center;font-size:16px;display: none" class="export">
                <button class="layui-btn layui-btn-sm"  style="width: 70px;float: right;" id="export">导出</button>
            </div>
            <ul class="cList" style="padding-top: 30px;">

            </ul>
            <div style="margin-top: 10px;">
                <textarea name="desc" id="pingCon" placeholder="请输入评论内容" class="layui-textarea"></textarea>
                <textarea name="" id="graded" oninput = "value=value.replace(/[^\d]/g,'')" maxlength="2" style="margin-top: 10px;min-height: 30px;height: 40px;display:none" placeholder="请输入评分(0-10)" class="layui-textarea"></textarea>
                <div style="text-align: center;margin-top: 10px;"><button type="button" id="pinglun" class="layui-btn layui-btn-sm">评论</button></div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>

    //地址取值
    function getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return  unescape(r[2]); return null;
    }
    var id = getQueryString('id')
    var sId
    layui.use(['rate','layer','table'], function () {
        var $ = layui.jquery
            , layer = layui.layer
            , rate = layui.rate //Tab的切换功能，切换事件监听等，需要依赖element模块
            , table = layui.table
        //线下课程详情显示
        $.ajax({
            url:'/trCourseSchedule/selectByCouseId',
            data:{courseId:id},
            type:'get',
            dataType:'json',
            success:function(res){
                if(res.msg!='err'){
                    $('#tables').show()
                    var data = res.object[0];
                    sId=data.scheduleId
                    pl()
                    getList()
                    $('.studentEvaluation').show()
                    $('.student').show()
                    $('.Introduction').html(data.courseIntroduce)
                    table.render({
                        elem: '#contentDirectory'
                       ,width: '100%'
                        ,url: '/trCourseSchedule/selectByCouseIdOnly'//数据接口
                        ,where: {courseId: $.GetRequest().id}
                        // ,page: true //开启分页
                        ,cols: [[ //表头
                            {field: 'period', title: '期次',width:80,templet: function(d){
                                    return '<span id="layIndex" class="'+d.LAY_INDEX+'">第'+d.LAY_INDEX+'期</span>'
                                }}
                            ,{field: 'courseTime', title: '上课时间',width:100,templet: function(d){
                                    return d.courseTime+'~'+d.courseTime1
                                }}
                            ,{field: 'courseAddress',width:100, title: '上课地点',}
                            ,{field: 'courseLecturer', width:100,title: '讲师',}
                        ]]
                        ,parseData: function(res){ //res 即为原始返回的数据
                            return {
                                "code": 0, //解析接口状态
                                "data": res.object //解析数据列表
                            };
                        }
                    });
                    $.ajax({
                        url:'/trCourseSchedule/selectByCouseId',
                        data:{courseId:id},
                        type:'get',
                        dataType:'json',
                        success:function(res){
                            var data = res.object[0];
                            $('#OfflineCourseName').html(data.scheduleName)
                        }
                    })
                }
            }
        })
        //监听当前行展示数据
        table.on('row(contentDirectory)', function (obj) {
            var data=obj.data
            layer.open({
                type: 1,
                title:'详情',
                area:['100%','30%'],
                id:'id',
                moveType: 1,
                content:'<div class="popups"><p><span class="wid">期次:</span><span>'+$(this).children().eq(0).text()+'</span></p>' +
                    '<p><span class="wid">上课时间:</span><span>'+data.courseTime.substr('',10)+'~'+data.courseTime1.substr('',10)+'</span></p>' +
                    '<p><span class="wid">上课地点:</span><span>'+data.courseAddress+'</span></p>' +
                    '<p><span class="wid">讲师:</span><span>'+data.courseLecturer+'</span></p>' +
                    '</div>'

            })
        });
        function pl(){
            $('#pinglun').click(function(){
                $.ajax({
                    url:'/trCourseManage/xianxiaPing',
                    data:{scheduleId:sId,content:$('#pingCon').val(),fraction:$('#graded').val()},
                    type:'get',
                    dataType:'json',
                    success:function(res){
                        console.log(res)
                        if(res.msg=='err'){
                            layer.msg('该课程还未学习，不能评论！', {icon: 5});
                        }
                        getList();
                        $('#pingCon').val('')
                    }
                })
            })
        }
        function getList(){
            $.ajax({
                url:'/trCourseManage/huixianPing',
                data:{scheduleId:sId},
                type:'get',
                dataType:'json',
                success:function(res){
                    var str=''
                    if(res.object!==undefined){
                        $('#pinglun').css('background-color','gainsboro').attr('disabled',true)
                        $('#pingCon').attr('readonly','readonly')
                        $('.export').css('display','block')
                        if(res.object.content==undefined){
                            var cont='';
                            str += ' <li>\n' +
                                '                        <div class="courseContent">'+cont+'</div>\n' +
                                '                    </li>'
                        }else {
                            str += ' <li>\n' +
                                '                        <div class="courseContent">评价:'+res.object.content+'</div>\n' +
                                '                    </li>'+
                                ' <li style="border-bottom:none;margin-top: 10px;height: 20px;">\n' +
                                '                        <div class="fraction">评分:'+res.object.fraction+'</div>\n' +
                                '                    </li>'
                        }
                    }else{
                        $('#graded').show()
                        $('.export').css('display','none')
                        $('.cList').css('padding-top',0)
                        str='<div style="text-align:center;font-size:16px;margin-top: 14px"><i class="layui-icon layui-icon-tips" style="font-size: 30px; color: #1E9FFF;vertical-align: middle;"></i> 暂无评论</div>'


                    }
                    $('.cList').html(str)
                }
            })
        }
    })
</script>